<script setup lang="ts">
import { postMemberAddressAPI, getMemberAddressByIdAPI, putMemberAddressByIdAPI } from '@/services/address'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'

// 表单数据
const form = ref({
    receiver: '', // 收货人
    contact: '', // 联系方式
    fullLocation: '', // 省市区(前端展示)
    provinceCode: '', // 省份编码(后端参数)
    cityCode: '', // 城市编码(后端参数)
    countyCode: '', // 区/县编码(后端参数)
    address: '', // 详细地址
    isDefault: 0, // 默认地址，1为是，0为否
})

// 获取页面传递的参数(用于动态设置标题)
const query = defineProps<{
    id?: string
}>()

// 获取uni-forms表单组件实例(用于调用表单方法)
const formRef = ref<UniHelper.UniFormsInstance>()

// 动态设置标题
uni.setNavigationBarTitle({ title: query.id ? '修改地址' : '新建地址' })

// 收集所在城市(数据为数组使用join转换为字符串)
// #ifdef MP-WEIXIN
const onRegionChange: UniHelper.RegionPickerOnChange = (ev) => {
    // 修改前端界面数据
    form.value.fullLocation = ev.detail.value.join(' ')
    // 修改后端数据(使用对象合并简化代码)
    const [provinceCode, cityCode, countyCode] = ev.detail.code!
    Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// #endif

// 使用云开发收集所在城市
// #ifdef H5 || APP-PLUS
const onCityChange: UniHelper.UniDataPickerOnChange = (ev) => {
    // 修改前端界面数据(Bug: 之前表单校验的是fullLocation, 所以这里改变校验countyCode数据)
    const [provinceCode, cityCode, countyCode] = ev.detail.value.map(v => v.value)
    // 修改后端数据(使用对象合并简化代码)
    Object.assign(form.value, { provinceCode, cityCode, countyCode })
}
// #endif

// 收集是否默认收货地址
const onSwitchChange: UniHelper.SwitchOnChange = (ev) => {
    form.value.isDefault = ev.detail.value ? 1 : 0
}

// 提交表单按钮事件(将收集的参数传递给接口)
// 保存成功则跳转上一页(添加定时器保留提示框)
// 若有id则发送修改请求, 没有则保存请求
const onSubmit = async () => {
    try {
        // 调用表单校验方法
        await formRef.value?.validate?.()
        // 表单校验通过后发送请求
        if (query.id) {
            await putMemberAddressByIdAPI(query.id, form.value)
        } else {
            await postMemberAddressAPI(form.value)
        }
        uni.showToast({ icon: 'success', title: query.id ? '修改成功' : '添加成功' })
        setTimeout(() => {
            uni.navigateBack()
        }, 400)
    } catch (error) {
        uni.showToast({ icon: 'error', title: '请填写完整信息' })
    }
}

// 获取修改收货地址数据并表单回显(若有id则携带id发送请求获取数据, 并对象合并到form表单数据中)
const getMemberAddressByIdData = async () => {
    if (query.id) {
        const res = await getMemberAddressByIdAPI(query.id)
        Object.assign(form.value, res.result)
    }
}

// 组件加载时调用(用于获取收货地址数据回显)
onLoad(() => {
    getMemberAddressByIdData()
})

// 定义表单校验规则
const rules: UniHelper.UniFormsRules = {
    receiver: {
        rules: [{ required: true, errorMessage: '请输入收货人姓名' }]
    },
    contact: {
        rules: [{ required: true, errorMessage: '请输入收货人手机号码' },
        { pattern: /^1[0-9]\d{9}$/, errorMessage: '请输入11位手机号码' }
        ]
    },
    countyCode: {
        rules: [{ required: true, errorMessage: '请输入收货人所在地区' }]
    },
    address: {
        rules: [{ required: true, errorMessage: '请输入收货人详细地址' }]
    }
}
</script>

<template>
    <view class="content">
        <uni-forms :rules="rules" :model="form" ref="formRef">
            <!-- 表单内容 -->
            <uni-forms-item name="receiver" class="form-item">
                <text class="label">收货人</text>
                <input class="input" placeholder="请填写收货人姓名" v-model="form.receiver" />
            </uni-forms-item>
            <uni-forms-item name="contact" class="form-item">
                <text class="label">手机号码</text>
                <input class="input" placeholder="请填写收货人手机号码" v-model="form.contact" />
            </uni-forms-item>
            <uni-forms-item name="countyCode" class="form-item">
                <text class="label">所在地区</text>
                <!-- #ifdef MP-WEIXIN -->
                <picker @change="onRegionChange" class="picker" mode="region" :value="form.fullLocation.split(' ')">
                    <view v-if="form.fullLocation">{{ form.fullLocation }}</view>
                    <view v-else class="placeholder">请选择省/市/区(县)</view>
                </picker>
                <!-- #endif -->
                <!-- #ifdef H5 || APP-PLUS -->
                <uni-data-picker placeholder="请选择地址" popup-title="请选择城市" collection="opendb-city-china"
                    field="code as value, name as text" orderby="value asc" :step-searh="true" self-field="code"
                    parent-field="parent_code" :clear-icon="false" @change="onCityChange" v-model="form.countyCode">
                </uni-data-picker>
                <!-- #endif -->
            </uni-forms-item>
            <uni-forms-item name="address" class="form-item">
                <text class="label">详细地址</text>
                <input class="input" placeholder="街道、楼牌号等信息" v-model="form.address" />
            </uni-forms-item>
            <view class="form-item">
                <label class="label">设为默认地址</label>
                <switch @change="onSwitchChange" class="switch" color="#27ba9b" :checked="form.isDefault === 1" />
            </view>
        </uni-forms>
    </view>
    <!-- 提交按钮 -->
    <button class="button" @tap="onSubmit">保存并使用</button>
</template>

<style lang="scss">
// 兼容H5-APP端样式
/* #ifdef H5 || APP-PLUS */
:deep(.selected-area) {
    height: auto;
    flex: 0 1 auto
}

/* #endif */

page {
    background-color: #f4f4f4;
}

.content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .form-item,
    .uni-forms-item {
        display: flex;
        align-items: center;
        min-height: 96rpx;
        padding: 25rpx 10rpx 40rpx;
        background-color: #fff;
        font-size: 28rpx;
        border-bottom: 1rpx solid #ddd;
        position: relative;
        margin-bottom: 0;

        // 调整 uni-forms 样式
        .uni-forms-item__content {
            display: flex;
        }

        .uni-forms-item__error {
            margin-left: 200rpx;
        }

        &:last-child {
            border: none;
        }

        .label {
            width: 200rpx;
            color: #333;
        }

        .input {
            flex: 1;
            display: block;
            height: 46rpx;
        }

        .switch {
            position: absolute;
            right: -20rpx;
            transform: scale(0.8);
        }

        .picker {
            flex: 1;
        }

        .placeholder {
            color: #808080;
        }
    }
}

.button {
    height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
}
</style>